import {
    ElDrawer
} from 'element-plus' ;

import {
    native as render,
    inject
} from 'zbee-ui-renderer' ;

import getButtons from './buttons';

export default {

    props: {

        title: {
            type: String
        },
        size: {},
        items: {},
        buttons: {}
    },

    emits: [
        'close',
        'apply',
        'cancel'
    ],

    setup(props, {
        emit
    }) {

        const {
                title,
                size,
                items,
                buttons
            } = props,
            renderItems = inject('tagRenderItems'),
            close = () => emit('close'),
            apply = params => {

                emit('apply', params);

                close();

            },
            cancel = () => {

                emit('cancel');

                close();

            },
            context = inject('widgetContext');

        context.apply = apply;
        context.cancel = cancel;

        return () => {

            return render({
                data: {
                    widget: ElDrawer,
                    title,
                    size,
                    modelValue: true,
                    items: {
                        isSlots: true,
                        data: {
                            default: () => renderItems(items),
                            footer: getButtons(buttons)
                        }
                    },
                    onClose: {
                        action: 'call',
                        function: close
                    }
                }
            });

        };

    }

};
